import React, { memo, useRef, useState } from 'react'
import type { ReactNode } from 'react'
import { Carousel } from 'antd'
import type { CarouselRef } from 'antd/es/carousel'
import classNames from 'classnames'

import { useAppSelector } from '@/store'
import { BannerControl, BannerLeft, BannerWrapper, BannerRight } from './style'

interface IProps {
  children?: ReactNode
}

const TopBanner: React.FC<IProps> = (props) => {
  // 当前轮播图下标（默认下标为0）
  const [currentIndex, setCurrentIndex] = useState(0)

  // 从store中获取轮播图信息
  const { banners } = useAppSelector((state) => ({
    banners: state.recommend.banners
  }))

  // 使用useRef这个钩子hook函数获取轮播图组件（如果不是绑定普通DOM，而是绑定组件，需要指定组件的类型）
  //   const bannerRef = useRef<ElementRef<typeof Carousel>>(null)
  const bannerRef = useRef<CarouselRef>(null) // 这里必须定义null，否则默认是undefined，会报错

  // 事件处理函数
  // 切换上一个轮播图（固定写法，可以看源码）
  function handlePrevClick() {
    bannerRef.current?.prev()
  }
  // 切换下一个轮播图（固定写法，可以看源码）
  function handleNextClick() {
    bannerRef.current?.next()
  }
  // 轮播图变化后，动态切换背景图片
  function handleAfterChange(current: number) {
    console.log('当前轮播图的index：', current)
    setCurrentIndex(current)
  }
  // function handleBeforeChange(from: number, to: number) {
  //   // setCurrentIndex(-1)
  // }

  // 获取轮播图的背景图片
  let bgImageUrl = null
  if (currentIndex >= 0 && banners.length > 0) {
    bgImageUrl = banners[currentIndex]?.imageUrl + '?imageViewblur=40×20' // 动态变化，高斯模糊
  }

  return (
    // 通过参数，动态将背景图片传入
    <BannerWrapper
      style={{
        background: `url('${bgImageUrl}') center center / 6000px`
      }}
    >
      <div className="banner wrap-v2">
        {/* 左侧轮播图 */}
        <BannerLeft>
          <Carousel
            dots={false}
            autoplay
            autoplaySpeed={3000}
            ref={bannerRef}
            effect="fade"
            afterChange={handleAfterChange}
          >
            {banners.map((item) => {
              return (
                <div className="banner-item" key={item.imageUrl}>
                  <img
                    className="image"
                    src={item.imageUrl}
                    alt={item.typeTitle}
                  />
                </div>
              )
            })}
          </Carousel>
          {/* 轮播图自定义指示器 */}
          <ul className="dots">
            {banners.map((item, index) => {
              return (
                <li key={item.imageUrl}>
                  <span
                    className={classNames('item', {
                      active: index === currentIndex
                    })}
                  ></span>
                </li>
              )
            })}
          </ul>
        </BannerLeft>

        {/* 右侧下载 */}
        <BannerRight></BannerRight>
        {/* 左右切换轮播图按钮 */}
        <BannerControl>
          <button className="btn left" onClick={handlePrevClick}></button>
          <button className="btn right" onClick={handleNextClick}></button>
        </BannerControl>
      </div>
    </BannerWrapper>
    // <div>
    //   {banners.map((item) => {
    //     return <div key={item.imageUrl}>{item.imageUrl}</div>
    //   })}
    // </div>
  )
}

export default memo(TopBanner)
